<template>
  <el-container>
    <Navigation></Navigation>

    <HeaderBar></HeaderBar>

    <div class="home" id="home" name="home">
      <!-- 轮播图 -->
      <div class="block">
        <el-carousel height="460px">
          <el-carousel-item v-for="item in carousel" :key="item.carouselId">
            <img style="height:460px;" :src="$target + item.imgPath" :alt="item.describes"/>
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 轮播图END -->
      <div class="main-box">
        <div class="main">
          <!-- 奖学金展示区域 -->
          <div class="phone">
            <div class="box-hd">
              <div class="title">奖学金</div>
            </div>
            <div class="box-bd">
              <div class="promo-list">
                <router-link to>
                  <img :src="$target +'Public/file/reward.png'"/>
                </router-link>
              </div>
              <div class="list">
                <MyList :list="rewardList" :isMore="true"></MyList>
              </div>
            </div>
          </div>
          <!-- 奖学金展示区域END -->

          <!-- 助学金展示区域 -->
          <div class="phone">
            <div class="box-hd">
              <div class="title">助学金</div>
            </div>
            <div class="box-bd">
              <div class="promo-list">
                <router-link to>
                  <img :src="$target +'Public/file/borrow.png'"/>
                </router-link>
              </div>
              <div class="list">
                <MyList :list="loansList" :isMore="true"></MyList>
              </div>
            </div>
          </div>
        </div>
        <!-- 助学金课程展示区域END -->
      </div>
    </div>

    <el-footer>
      <FooterBar></FooterBar>
    </el-footer>
  </el-container>
</template>
<script>
import MyList from "@/components/MyList";
import Navigation from "@/components/FrontComponents/Navigation";
import HeaderBar from "@/components/FrontComponents/HeaderBar";
import FooterBar from "@/components/FrontComponents/FooterBar";

export default {
  components: {
    HeaderBar,
    Navigation,
    MyList,
    FooterBar
  },
  data() {
    return {
      carousel: "", // 轮播图数据
      rewardList: "", // 手机商品列表
      loansList: "", // 小米电视商品列表
      accessoryList: "", //配件商品列表
      accessoryHotList: "", //热门配件商品列表
      protectingShellList: "", // 保护套商品列表
      chargerList: "", //充电器商品列表
      applianceActive: 1, // 家电当前选中的商品分类
      accessoryActive: 1 // 配件当前选中的商品分类
    };
  },
  watch: {
    // 家电当前选中的商品分类，响应不同的商品数据
    applianceActive: function (val) {
      // 页面初始化的时候把applianceHotList(热门家电商品列表)直接赋值给applianceList(家电商品列表)
      // 所以在切换商品列表时判断applianceHotList是否为空,为空则是第一次切换,把applianceList赋值给applianceHotList
      if (this.applianceHotList == "") {
        this.applianceHotList = this.applianceList;
      }
      if (val == 1) {
        // 1为热门商品
        this.applianceList = this.applianceHotList;
        return;
      }
      if (val == 2) {
        // 2为电视商品
        this.applianceList = this.miTvList;
        return;
      }
    },
    accessoryActive: function (val) {
      // 页面初始化的时候把accessoryHotList(热门配件商品列表)直接赋值给accessoryList(配件商品列表)
      // 所以在切换商品列表时判断accessoryHotList是否为空,为空则是第一次切换,把accessoryList赋值给accessoryHotList
      if (this.accessoryHotList == "") {
        this.accessoryHotList = this.accessoryList;
      }
      if (val == 1) {
        // 1为热门商品
        this.accessoryList = this.accessoryHotList;
        return;
      }
      if (val == 2) {
        // 2为保护套商品
        this.accessoryList = this.protectingShellList;
        return;
      }
      if (val == 3) {
        //3 为充电器商品
        this.accessoryList = this.chargerList;
        return;
      }
    },
    getUser: function () {
    }
  },
  created() {
    // 获取轮播图数据
    this.$axios
        .post("/home/carousel", {})
        .then(res => {
          this.carousel = res.data.data;
        })
        .catch(err => {
          return Promise.reject(err);
        });
    // 获取各类商品数据
    this.getPromo(1, "rewardList");
    this.getPromo(2, "loansList");

  },
  methods: {

    // 获取家电模块子组件传过来的数据
    getChildMsg(val) {
      this.applianceActive = val;
    },
    // 获取配件模块子组件传过来的数据
    getChildMsg2(val) {
      this.accessoryActive = val;
    },
    // 获取各类商品数据方法封装
    getPromo(category_id, val, api) {
      api = api != undefined ? api : "/home/getPromoProject";
      this.$axios
          .post(api, {
            category_id
          })
          .then(res => {
            this[val] = res.data.data;
          })
          .catch(err => {
            return Promise.reject(err);
          });
    },
    // login() {
    //   // 点击登录按钮, 通过更改vuex的showLogin值显示登录组件
    //   //this.$store.commit("setShowLogin", true);
    //   this.setShowLogin(true)
    //   console.log("显示登录"+this.$store.getters.getShowLogin)
    // },
    // logout() {
    //   this.visible = false;
    //   // 清空本地登录信息
    //   localStorage.setItem("user", "");
    //   // 清空vuex登录信息
    //   this.setUser("");
    //   this.notifySucceed("成功退出登录");
    // },
    // // 接收注册子组件传过来的数据
    isRegister(val) {
      this.register = val;
    },
    // // 点击搜索按钮
    // searchClick() {
    //   if (this.search !== "") {
    //     // 跳转到全部商品页面,并传递搜索条件
    //     this.$router.push({path: "/goods", query: {search: this.search}});
    //     this.search = "";
    //   }
    // }
  }
};
</script>
<style scoped>
@import "../assets/css/index.css";
</style>